import type { Meta, StoryObj } from '@storybook/react';
import { DESIGN_TOKENS, CSS_CLASSES, MEDICAL_CLASSES } from './index';

const meta: Meta = {
  title: 'Design System/Overview',
  parameters: {
    docs: {
      description: {
        component: '医疗空间数字孪生设计系统展示，包含颜色、组件、医疗特定样式等。'
      }
    }
  }
};

export default meta;
type Story = StoryObj;

// 颜色展示
export const Colors: Story = {
  name: '颜色系统',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">颜色系统</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {/* 主色调 */}
        <div>
          <h3 className="text-lg font-medium mb-4">主色调 - 专业蓝色</h3>
          <div className="space-y-2">
            {Object.entries(DESIGN_TOKENS.colors.primary).map(([key, value]) => (
              <div key={key} className="flex items-center gap-3">
                <div 
                  className="w-12 h-12 rounded border shadow-1"
                  style={{ backgroundColor: value }}
                />
                <div>
                  <div className="font-medium">primary-{key}</div>
                  <div className="text-sm text-secondary">{value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 辅助色 */}
        <div>
          <h3 className="text-lg font-medium mb-4">辅助色 - 医疗绿色</h3>
          <div className="space-y-2">
            {Object.entries(DESIGN_TOKENS.colors.secondary).map(([key, value]) => (
              <div key={key} className="flex items-center gap-3">
                <div 
                  className="w-12 h-12 rounded border shadow-1"
                  style={{ backgroundColor: value }}
                />
                <div>
                  <div className="font-medium">secondary-{key}</div>
                  <div className="text-sm text-secondary">{value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 可视化色彩 */}
        <div>
          <h3 className="text-lg font-medium mb-4">可视化专用色彩</h3>
          <div className="space-y-2">
            {Object.entries(DESIGN_TOKENS.colors.visualization).map(([key, value]) => (
              <div key={key} className="flex items-center gap-3">
                <div 
                  className="w-12 h-12 rounded border shadow-1"
                  style={{ backgroundColor: value }}
                />
                <div>
                  <div className="font-medium">{key}</div>
                  <div className="text-sm text-secondary">{value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
};

// 按钮组件展示
export const Buttons: Story = {
  name: '按钮组件',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">按钮组件</h2>
      
      <div className="space-y-6">
        {/* 按钮变体 */}
        <div>
          <h3 className="text-lg font-medium mb-4">按钮变体</h3>
          <div className="flex flex-wrap gap-4">
            <button className={CSS_CLASSES.buttons.primary}>主要按钮</button>
            <button className={CSS_CLASSES.buttons.secondary}>次要按钮</button>
            <button className={CSS_CLASSES.buttons.outline}>线框按钮</button>
            <button className={CSS_CLASSES.buttons.ghost}>幽灵按钮</button>
          </div>
        </div>

        {/* 按钮尺寸 */}
        <div>
          <h3 className="text-lg font-medium mb-4">按钮尺寸</h3>
          <div className="flex flex-wrap items-end gap-4">
            <button className={CSS_CLASSES.buttons.small}>小按钮</button>
            <button className="btn btn-primary">默认按钮</button>
            <button className={CSS_CLASSES.buttons.large}>大按钮</button>
          </div>
        </div>

        {/* 按钮状态 */}
        <div>
          <h3 className="text-lg font-medium mb-4">按钮状态</h3>
          <div className="flex flex-wrap gap-4">
            <button className="btn btn-primary">正常状态</button>
            <button className="btn btn-primary" disabled>禁用状态</button>
            <button className="btn btn-primary">
              <span className="loading mr-2"></span>
              加载状态
            </button>
          </div>
        </div>
      </div>
    </div>
  )
};

// 卡片组件展示
export const Cards: Story = {
  name: '卡片组件',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">卡片组件</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* 默认卡片 */}
        <div className={CSS_CLASSES.cards.default}>
          <div className="card-header">
            <div className="card-title">默认卡片</div>
            <div className="card-subtitle">这是卡片的副标题</div>
          </div>
          <p>这是卡片的内容区域，可以包含文本、图片或其他组件。</p>
        </div>

        {/* 浮起卡片 */}
        <div className={CSS_CLASSES.cards.elevated}>
          <div className="card-header">
            <div className="card-title">浮起卡片</div>
            <div className="card-subtitle">具有更强阴影效果</div>
          </div>
          <p>这种卡片适用于需要突出显示的重要内容。</p>
        </div>

        {/* KPI 卡片 */}
        <div className={CSS_CLASSES.cards.kpi}>
          <div className="kpi-label">床位使用率</div>
          <div className="kpi-value">85%</div>
          <div className="kpi-change positive">+5.2%</div>
        </div>
      </div>
    </div>
  )
};

// 医疗特定组件展示
export const MedicalComponents: Story = {
  name: '医疗特定组件',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">医疗特定组件</h2>
      
      <div className="space-y-8">
        {/* 热力图图例 */}
        <div>
          <h3 className="text-lg font-medium mb-4">热力图图例</h3>
          <div className={MEDICAL_CLASSES.heatmap.legend}>
            <div className={MEDICAL_CLASSES.heatmap.legendLow}>低密度</div>
            <div className={MEDICAL_CLASSES.heatmap.legendMedium}>中密度</div>
            <div className={MEDICAL_CLASSES.heatmap.legendHigh}>高密度</div>
          </div>
        </div>

        {/* 告警标签 */}
        <div>
          <h3 className="text-lg font-medium mb-4">告警标签</h3>
          <div className="flex flex-wrap gap-3">
            <span className={CSS_CLASSES.alerts.critical}>紧急告警</span>
            <span className={CSS_CLASSES.alerts.warning}>警告信息</span>
            <span className={CSS_CLASSES.alerts.info}>提示信息</span>
            <span className={CSS_CLASSES.alerts.success}>成功状态</span>
          </div>
        </div>

        {/* 状态指示器 */}
        <div>
          <h3 className="text-lg font-medium mb-4">状态指示器</h3>
          <div className="flex flex-wrap gap-4">
            <div className={CSS_CLASSES.status.online}>
              <div className="status-indicator-dot"></div>
              在线
            </div>
            <div className={CSS_CLASSES.status.offline}>
              <div className="status-indicator-dot"></div>
              离线
            </div>
            <div className={CSS_CLASSES.status.warning}>
              <div className="status-indicator-dot"></div>
              警告
            </div>
          </div>
        </div>

        {/* 轨迹图例 */}
        <div>
          <h3 className="text-lg font-medium mb-4">轨迹图例</h3>
          <div className="space-y-2">
            <div className="trajectory-legend-item">
              <div className="trajectory-legend-color trajectory-normal"></div>
              普通轨迹
            </div>
            <div className="trajectory-legend-item">
              <div className="trajectory-legend-color trajectory-emergency"></div>
              紧急轨迹
            </div>
            <div className="trajectory-legend-item">
              <div className="trajectory-legend-color trajectory-bottleneck"></div>
              瓶颈点
            </div>
            <div className="trajectory-legend-item">
              <div className="trajectory-legend-color trajectory-optimized"></div>
              优化路径
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

// 间距系统展示
export const Spacing: Story = {
  name: '间距系统',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">间距系统</h2>
      
      <div className="space-y-6">
        {Object.entries(DESIGN_TOKENS.spacing).map(([key, value]) => (
          <div key={key} className="flex items-center gap-4">
            <div className="w-16 text-sm font-medium">space-{key}</div>
            <div 
              className="bg-primary-500 h-4 border rounded"
              style={{ width: value }}
            />
            <div className="text-sm text-secondary">{value}</div>
          </div>
        ))}
      </div>
    </div>
  )
};

// 阴影系统展示
export const Shadows: Story = {
  name: '阴影系统',
  render: () => (
    <div className="p-6">
      <h2 className="text-2xl font-semibold mb-6">阴影系统</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {Object.entries(DESIGN_TOKENS.shadows).map(([key, value]) => (
          <div key={key} className="text-center">
            <div 
              className="w-24 h-24 bg-white border rounded-lg mx-auto mb-4"
              style={{ boxShadow: value }}
            />
            <div className="font-medium">shadow-{key}</div>
            <div className="text-sm text-secondary mt-1">{value}</div>
          </div>
        ))}
      </div>
    </div>
  )
}; 